<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
Vue中使用组件的三大步骤
    一.定义组件(创建组件)
    二.注册组件
    三.编写组件标签

    一.如何定义一个组件(创建组件)
        使用Vue.extend(options)创建,传入的options和new vue时传入的那个options几乎一样.但也有点区别
        区别如下:
            1.el不要写. 最终所有的组件都要经过一个vm管理,由vm中的el决定服务那个服务器
            2.data必须写成函数 避免多组件多次复用时 数据存在引用关系
            3.template属性可以配置组件结构
    二.如何注册组件
        1.局部注册 用new Vue({})传入components
        2.全局注册 用Vue.component('组件名',组件)
    三.编写组件的标签 写法
        1.<School/>
        2.<School></School>
        3.<school/>
        4.<school></school>
        备注 如果脱离脚手架.则自闭合标签和组件标签都有bug
-->
<div id="root">
<School/>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false//禁止提示生产提示
    //定义Hello组件
    const Hello=Vue.extend({
        template: `<h1>你好</h1>`,
    })

    //定义School组件
    const School=Vue.extend({
        template:`
             <div>
                <h2>地点：{{name}}</h2>
                <h2>地址：{{address}}</h2>
                <h2>景点：{{changcheng}}</h2>
                <button @click="show">点我景点名</button>
             <Hello/>
            </div>
        `,
        /*注册子组件*/
        components: {
            Hello,
        },
        data(){
            return {
                name:"北京",
                address:"中国",
                changcheng:"长城"
            }
        },
        methods:{
            show(){
                alert(this.changcheng)
            }
        }
    })
    /*全局注册组件用的较少*/
    Vue.component('School',School)
    new Vue({
        el:"#root",
        //局部注册组件(用的多)
        components:{
            School,
        }
    })
</script>
</body>
</html>